layui.define(['form', 'validation', 'treeSelect', 'element', 'selectPlus', 'laydate'], function (exports) {
    const $ = layui.jquery,
        form = layui.form,
        validation = layui.validation,
        selectPlus = layui.selectPlus,
        laydate = layui.laydate,
        treeSelect = layui.treeSelect,
        element = layui.element,
        tree = layui.tree;
    let xzq = null
    let renderform = {
        init: function (formParams, callback) {
            let {type, filter, lables, row} = formParams

            layer.open({
                type: 1,
                title: false,
                closeBtn: false,
                area: '600px',
                shade: 0,
                id: filter + '-lay open_form_layer', //设定一个id，防止重复弹出
                btn: ['确认', '取消'],
                btnAlign: 'c',
                moveType: 0, //拖拽模式，0或者1
                content: renderform.render(filter, lables),
                success: function () {
                    handles.resetPanelStyle(filter)
                    form.render()
                    renderform.renderCustomComp(formParams, lables)
                    if(type == 'update') {
                        form.val(filter + '-layer', row)
                    }
                },
                yes: function (index) {
                    let formdata = form.val(filter + '-layer')
                    if (!renderform.verification(formdata)) return;
                    callback(formdata, formParams)
                    layer.close(index)
                }
            })
        },
        request: function (reqParams, callback) {
            let {url, data, tip} = reqParams
            apiRequestCru({
                url: url,
                params: data
            }).then(res => {
                layer.msg(tip +'成功！', {icon: 1,offset: '10px'})
                if(callback) callback(res, reqParams)
            }).catch(err => {
                layer.msg(err, {icon: 2,offset: '10px'})
            })
        },
        renderCustomComp: function (formParams, lables){
            for(let i in lables) {
                if (lables[i].type == 'date') {
                    laydate.render({
                        type: 'datetime',
                        elem: `#${lables[i].name}`,
                        value: formParams.row[lables[i].name],
                        isInitValue: formParams.type == 'update'
                    });
                }
                if(lables[i].type == 'treeselect') {
                    treeSelect.render({
                        elem: '#'+lables[i].name,
                        list: lables[i].data.list,
                        selectType: lables[i].data.selectType,
                        placeholder: lables[i].placeholder,
                        search: true,
                        click: function (d) {
                            $('#' + d.treeId).find('input').val(d.selectVal)
                            if(lables[i].name == 'xzq') {
                                $('#'+lables[i].name).val(d.current.code)
                            } else {
                                $('#'+lables[i].name).val(d.selectVal)
                            }
                        },
                        success: function (d) {
                            if(formParams.type == 'update') {
                                if(lables[i].name == 'xzq') {
                                    $('#' + d.treeId).find('input').val(CommonUtils.getXzqnameFromCode(formParams.row.xzq))
                                } else {
                                    $('#' + d.treeId).find('input').val(formParams.row[lables[i].name])
                                }
                                $('#'+lables[i].name).val(formParams.row[lables[i].name])
                            }

                        }
                    });
                }
            }
        },
        render: function (filter, lables) {
            function appendHtml(title, tempHtml) {
                let temp = "<div class=\"layui-form-item\">";
                temp += "<label class=\"layui-form-label\">" + title + "</label>";
                temp += "<div class=\"layui-input-block\">" + tempHtml + "</div>";
                temp += "</div>";
                return temp;
            }
            let html = "<div class=\"layui-form\" id=\"layui-"+ filter +"\">";
            html += "<form class=\"layui-form\" lay-filter=\"" + filter + "-layer\" style=\"padding: 20px 20px 0 0;\">";
            for (let i in lables) {
                /**
                 form：{
                     type:""+subtype+"",//表单提交类型
                     style:{
                         overflow:"hidden"
                     },//自定义样式
                     filter:"layer_map_form"//唯一标识
                 };
                 **/
                let lable = lables[i];
                let tempHtml = "";
                /** {title:"",type:"",name:"",verify:"",placeholder:"",value:"",disabled:""} */
                if (lable.type == 'hidden') {
                    tempHtml = "<input type=\"hidden\" name=\"" + lable.name + "\" value=\"" + lable.value + "\" autocomplete=\"off\" placeholder=\"" + lable.placeholder + "\" class=\"layui-input\" " + (lable.hasOwnProperty("verify") ? "lay-verify=\"" + lable.verify + "\"" : "") + " " + (lable.hasOwnProperty("disabled") ? "disabled" : "") + ">";
                }
                /** {title:"",type:"",name:"",verify:"",placeholder:"",value:"",disabled:""} */
                if (lable.type == 'text') {
                    tempHtml = "<input type=\"text\" name=\"" + lable.name + "\" lay-verify=\"" + lable.verify + "\" autocomplete=\"off\" placeholder=\"" + lable.placeholder + "\" class=\"layui-input\" " + (lable.hasOwnProperty("verify") ? "lay-verify=\"" + lable.verify + "\"" : "") + " " + (lable.hasOwnProperty("disabled") ? "disabled" : "") + ">";
                }
                /** 时间选择器：{title:"xxx",type:"date",placeholder:"",} **/
                if (lable.type == 'date') {
                    tempHtml = `<input type="text" name="${lable.name}" id="${lable.name}" lay-verify="${lable.verify}" placeholder="${lable.placeholder}" autoComplete="off" class="layui-input">`
                }
                /** 下拉多选组件（非树）{title: "xx",type:"checkgroup",data:[{name: 'xx', title: 'xx', id: x},{...}]} **/
                if (lable.type == 'checkgroup') {
                    tempHtml = `
                        <div class="layui-unselect layui-form-select">
                            <div class="layui-select-title">
                                <input class="layui-input layui-unselect" type="text" id="${lable.name}" readonly="" placeholder="请选择爱好" value="">
                                <i class="layui-edge"></i>
                            </div>
                            <dl class="layui-anim layui-anim-upbit">
                                <dd>
                                    <table class="layui-table layui-form" id="${lable.name}" lay-skin="line"></table>
                                </dd>
                            </dl>
                        </div>
                    `
                }
                if(lable.type == 'treeselect') {
                    tempHtml = `<input type="text" id="${lable.name}" name="${lable.name}" lay-filter="${lable.name}" class="layui-input" value="">`
                }
                /** {title:"",type:"",title:"",data:[{width:"",name:"",filter:"",placeholder:"",verify:""}]} */
                if (lable.type == 'text-pro') {
                    tempHtml = "<div class=\"layui-form-item\">";
                    tempHtml += "<label class=\"layui-form-label\">" + lable.title + "</label>";
                    for (let o in lable.data) {
                        tempHtml += "<div class=\"layui-input-inline\" style=\"width: " + lable.data[o].width + "px;\">";
                        tempHtml += "<input type=\"text\" name=\"" + lable.data[o].name + "\"  lay-filter=\"" + lable.filter + "\" placeholder=\"" + lable.data[o].placeholder + "\" autocomplete=\"off\" class=\"layui-input\" " + (lable.data[o].hasOwnProperty("verify") ? "lay-verify=\"" + lable.data[o].verify + "\"" : "") + ">";
                        tempHtml += "</div>";
                    }
                    tempHtml += "</div>";
                }
                /** {title:"",type:"",name:"",filter:"",verify:"",search:"",placeholder:"",data:[{value:"",title:""}]} */
                if (lable.type == 'select') {
                    tempHtml = "<select name=\"" + lable.name + "\" lay-filter=\"" + lable.filter + "\" " + (lable.hasOwnProperty("verify") ? "lay-verify=\"" + lable.verify + "\"" : "") + " lay-search=\"" + lable.search + "\">";
                    tempHtml += "<option value=\"\">" + lable.placeholder + "</option>";
                    for (let o in lable.data) {
                        tempHtml += "<option value=\"" + lable.data[o].value + "\">" + lable.data[o].title + "</option>";
                    }
                    tempHtml += "</select>";
                }
                /** {title:"",type:"",data:[{name:"",filter:"",value:"",title:"",checked:"",disabled:""}]} */
                if (lable.type == 'radio') {
                    for (let o in lable.data) {
                        tempHtml += "<input type=\"radio\" name=\"" + lable.data[o].name + "\" lay-filter=\"" + lable.data[o].filter + "\" value=\"" + lable.data[o].value + "\" title=\"" + lable.data[o].title + "\" " + (lable.data[o].hasOwnProperty("checked") ? "checked" : "") + " " + (lable.data[o].hasOwnProperty("disabled") ? "disabled" : "") + ">";
                    }
                }
                /** {title:"",type:"",data:[{name:"",filter:"",title:"",checked:"",disabled:""}]} */
                if (lable.type == 'checkbox') {
                    for (let o in lable.data) {
                        tempHtml += "<input type=\"checkbox\" name=\"" + lable.data[o].name + "\" lay-skin=\"primary\" lay-filter=\"" + lable.data[o].filter + "\" title=\"" + lable.data[o].title + "\" " + (lable.data[o].hasOwnProperty("checked") ? "checked" : "") + " " + (lable.data[o].hasOwnProperty("disabled") ? "disabled" : "") + ">";
                    }
                }
                /** {title:"",type:"",name:"",value:"",skin:"",filter:"",text:"",checked:""} */
                if (lable.type == 'switch') {
                    tempHtml = "<input type=\"checkbox\" name=\"" + lable.name + "\" value=\"" + lable.value + "\" lay-skin=\"switch\" lay-filter=\"" + lable.filter + "\" lay-text=\"" + lable.text + "\" " + (lable.checked ? lable.checked : "") + ">";
                }
                /** {title:"",type:"",name:"",placeholder:""} */
                if (lable.type == 'textarea') {
                    tempHtml = "<textarea name=\"" + lable.name + "\" placeholder=\"" + lable.placeholder + "\" class=\"layui-textarea\"></textarea>";
                }
                if (lable.type != 'hidden' && lable.type != 'text-pro' && tempHtml.length > 0) {
                    tempHtml = appendHtml(lable.title, tempHtml);
                }
                html += tempHtml;
            }
            return html + "</form></div>";
        },
        verification: function (formdata) {
            let bj = false;
            for (let key in formdata) {
                let verify = $("[name='" + key + "']").attr("lay-verify");
                if (verify != '' && verify != undefined && verify != "undefined") {
                    let title = $("[name='" + key + "']").parent().parent().children(":first").text();
                    let flag = validation.init(title, verify, formdata[key]);
                    if (!flag) {
                        $("[name='" + key + "']").css("border", "2px solid red");
                        $("[name='" + key + "']").focus(function () {
                            $("[name='" + key + "']").css("border", "0");
                        });
                        return false;
                    } else {
                        bj = true;
                    }
                } else {
                    bj = true;
                }
            }
            return bj;
        }
    }
    const handles = {
        resetPanelStyle: function (filter) {
            if($('#layui-'+filter).height() > 360) {
                $('#layui-'+filter).css('overflow-y', 'scroll')
                $('#layui-'+filter).css('max-height', '360px')
                // $('#layui-'+filter).parent().parent().css('top', '50%')
                // $('#layui-'+filter).parent().parent().css('transform', 'translateY(-50%)')
            }
        }
    }
    exports('renderform', renderform)
})